<template>
   <dl>
       <dt><img :src="image" alt=""></dt>
       <dd v-if="type === 1">
         <p>{{title}}</p>
         <p>
           <span>￥<b>{{price}}</b></span>
            <span>销量<i>{{saleNum}}</i></span>
          </p>
       </dd>
     </dl>
</template>

<script>
export default {
  name: 'shopCart',
  props: ['id', 'title', 'image', 'price', 'saleNum', 'type']
}
</script>

<style lang="scss" scoped>
    dl{
    width: 50%;
    padding: 10px;
    font-size: 12px;
    dt{
      height: 220px;
      img{
        width: 100%;
        height: 100%;
      }
    }
   dd{
     p{
       overflow: hidden;
       width: 100%;
       text-overflow: ellipsis;
       white-space: nowrap;
       align-items: center;
       &:last-child{
        font-size:12px;
         display: flex;
         flex-direction: row;
         justify-content: space-between;
         b{
           font-weight:normal;
           font-size: 20px;
         }
         i{
           font-style: normal;
         }
       }
     }
   }
  }
</style>
